<!--
 * @Author: rxn 1003312535@qq.com
 * @Date: 2024-07-31 11:03:30
 * @LastEditors: rxn 1003312535@qq.com
 * @LastEditTime: 2024-07-31 15:38:37
 * @FilePath: \vue3-progect\src\views\example\three\case\flyLine\flyLine01.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- three.js 飞线功能开发 -->
<template>
	<div class="container" id="container"></div>
</template>
<script setup>
import { onMounted } from "vue";
//-
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
//-
onMounted(() => {
	//-
	const container = document.getElementById("container");
	const instance = new flyLine(container);
});

class flyLine {
	container = null;
	scene = null;
	camera = null;
	renderer = null;

	constructor(container) {
		this.container = container;
		this.scene = new THREE.Scene();
		this.camera = this.createCamera();
		this.renderer = this.createRenderer();
		this.animate();
		// this.scene.add(this.camera, )
		this.initHelper();
	}
	//-创建相机
	createCamera() {
		const camera = new THREE.PerspectiveCamera(
			90,
			this.container.offsetWidth / this.container.offsetHeight,
			0.1,
			1000
		);
		camera.position.set(0, 0, 100);
		return camera;
	}
	//-创建渲染实例
	createRenderer() {
		const renderer = new THREE.WebGLRenderer();
		renderer.setSize(this.container.offsetWidth, this.container.offsetHeight);
		this.container.appendChild(renderer.domElement);
		return renderer;
	}
	//-执行渲染
	render() {
		this.renderer.render(this.scene, this.camera);
	}
	//-循环渲染
	animate() {
		requestAnimationFrame(this.animate.bind(this));
		this.render();
	}
	/**
	 * -------------------------------------------------
	 * 辅助功能
	 * -------------------------------------------------
	 */
	initHelper() {
		this.createAxesHelper();
		this.OrbitControlsHelper();
	}
	//-辅助-axesHelper
	createAxesHelper() {
		const axesHelper = new THREE.AxesHelper(200);
		this.scene.add(axesHelper);
	}
	//-辅助-相机轨道运动
	OrbitControlsHelper() {
		const controls = new OrbitControls(this.camera, this.renderer.domElement);
		controls.update();
	}
}
</script>
<style lang="less" scoped>
//-
.container {
	width: 100%;
	height: 100%;
}
</style>
